<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
    $(document).ready(function() {

        Page.render('#fwHead', '#fwHead_template');
        Page.render('#fwBody', '#fwBody_template');
		
        $('#btnCloseRule').click(function() {
            var $box = $('#edit_box'), $mask = $('#mask');
            $box.hide();
            $mask.hide();
        });
		
		$("#lanOptions").click(function () {
            if ($(this).prop("checked")) {
                $('#lanDiv').show();
            } else {
                $('#lanDiv').hide();

            }
        })
		
    });
</script>

<div class="detail" id="fwHead">
    <script type="text/template" id="fwHead_template">
        <div id="edit_title"><%- title.addUrlFiltering %></div>
        <div id="edit_close"><input id="btnCloseRule" type="button" value="<%- btn.close %>" /></div>
        <div style="clear:both;"></div>
    </script>
</div>
<div id="fwBody">
    <script type="text/template" id="fwBody_template">
        <table class="detail" cellspacing="0">
            <tr style="display:none;">
                <th><%- net.ipv46 %><%- colon %></th>
                <td>
                    <input type="radio" name="ippro" value="IPV4" checked="checked" /><%- net.ipv4 %>&nbsp;
                    <input type="radio" name="ippro" value="IPV6" /><%- net.ipv6 %>&nbsp;
                </td>
            </tr>
            <tr>
                <th><%- table.filterMode %><%- colon %></th>
                <td>
                    <input type="radio" name="action" value="ACCEPT" checked="checked" /><span class="ok"><%- status.accept %>&nbsp;</span>
                    <input type="radio" name="action" value="DROP" /><span class="fail"><%- status.reject %>&nbsp;</span>
                </td>
            </tr>
            <tr>
                <th><%- lbl.urlKeyword %><%- colon %></th>
                <td><input type="text" id="url" name="url" class="larger" maxlength="99" /><span class="cmt"><%- lbl.example %><%- colon %>google.com</span></td>
            </tr>

			<tr>
                <th><%- lbl.advancedOptions %><%- colon %></th>
            <td>
                 <input type="checkbox" id="lanOptions" name="lanOptions" style="float: left" />
                 <div id ="lanDiv" style="float: left;display:none">
                    <input type="radio" name="interface" value="" checked="checked" /><span name="faceSpan"></span>
                    <input type="radio" name="interface" value="" /><span name="faceSpan"></span>
                    <input type="radio" name="interface" value="" /><span name="faceSpan"></span>
                </div>
            </td>
            </tr>
            <tr>
                <th><%- lbl.remark %><%- colon %></th>
                <td><input type="text" id="comment" name="comment" class="larger" maxlength="99" /></td>
            </tr>
            <tr>
                <th>&nbsp;</th>
                <td><input type="button" id="btnSaveRule" value="<%- btn.save %>"/></td>
            </tr>
        </table>
    </script>
</div>
